<template>
  <el-dialog
    :visible.sync="visible"
    width="60%"
    destroy-on-close
    title="上游依赖任务"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <el-tabs v-if="visible" v-model="activeName">
      <el-tab-pane label="上下游依赖表" name="1">
        <List :data="data"/>
      </el-tab-pane>
      <el-tab-pane label="依赖视图" name="2">
        <Graph :data="data"/>
      </el-tab-pane>
    </el-tabs>
    <div class="btn-section">
      <el-button @click="close">返回</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from '../utils/request'
import List from './list.vue'
import Graph from './graph.vue';

export default {
  components: { List, Graph },
  data() {
    return {
      visible: false,
      activeName: '1',
      info: {},
      data: []
    }
  },
  methods: {
    init(info) {
      this.activeName = '1';
      this.visible = true;
      this.info = info;
      this.$nextTick(()=> {
        this.requestData();
      })
    },
    requestData() {
      return request({
        url: '/xxlJob/relation/relationList',
        method: 'get',
        params: {
          xxlJobId: this.info.xxlJobId
        }
      }).then(res=> {
        this.data = res
      })
    },
    close() {
      this.visible = false;
      this.data = [];
    },
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  &::before {
    content: '';
    background-color: #3c9afb;
    display: inline-block;
    width: 6px;
    height: 26px;
    margin-right: 10px;
  }
}
.dependency-config {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  .option-item {
    margin-bottom: 10px;
  }
}
.new {
  margin-bottom: 10px;
}
.btn-section {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
